<template>
  <div class="app-container">
    <el-card shadow="never">
      <div class="title">搜索条件</div>
      <div class="search-wrap">
        <el-form :inline="true" label-width="100px">
          <el-form-item label="优惠券编号：">
            <div class="item">
              <el-input v-model="get_discount_coupon_info_list.keywordNumber" placeholder="请输入关键词" clearable @keyup.enter.native="getDiscountCouponInfoList" />
            </div>
          </el-form-item>
          <el-form-item label="优惠券名称：">
            <div class="item">
              <el-input v-model="get_discount_coupon_info_list.keywordName" placeholder="请输入关键词" clearable @keyup.enter.native="getDiscountCouponInfoList" />
            </div>
          </el-form-item>
          <el-form-item label="优惠券活动：">
            <el-select
              v-model="get_discount_coupon_info_list.discount_coupon_activity_id"
              multiple
              collapse-tags
              :filterable="true"
              placeholder="请选择优惠券活动"
              @change="getDiscountCouponInfoList"
            >
              <el-option
                v-for="item in data_discount_coupon_info_list.discountCouponActivity"
                :key="item.discount_coupon_activity_id"
                :label="item.title"
                :value="item.discount_coupon_activity_id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="优惠券模板：">
            <el-select
              v-model="get_discount_coupon_info_list.discount_coupon_template_id"
              multiple
              collapse-tags
              :filterable="true"
              placeholder="请选择优惠券模板"
              @change="getDiscountCouponInfoList"
            >
              <el-option
                v-for="item in data_discount_coupon_info_list.discountCouponTemplate"
                :key="item.discount_coupon_template_id"
                :label="item.name"
                :value="item.discount_coupon_template_id"
              >
                <span style="float: left;margin-right: 0.5rem;">{{ item.discount_coupon_template_number }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="优惠券类型：">
            <div class="item">
              <el-checkbox-group
                v-model="get_discount_coupon_info_list.type"
                :min="1"
                style="margin: 0.2rem 0.8rem 0.2rem 0;"
                @change="getDiscountCouponInfoList"
              >
                <el-checkbox :label="0" border>立减</el-checkbox>
                <el-checkbox :label="1" border>折扣</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
          <el-form-item label="优惠码领取：">
            <div class="item">
              <el-checkbox-group
                v-model="get_discount_coupon_info_list.is_promotion_code"
                :min="1"
                style="margin: 0.2rem 0.8rem 0.2rem 0;"
                @change="getDiscountCouponInfoList"
              >
                <el-checkbox :label="0" border>否</el-checkbox>
                <el-checkbox :label="1" border>是</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
          <el-form-item label="用户类型：">
            <div class="item">
              <el-checkbox-group
                v-model="get_discount_coupon_info_list.user_type"
                :min="1"
                style="margin: 0.2rem 0.8rem 0.2rem 0;"
                @change="getDiscountCouponInfoList"
              >
                <el-checkbox :label="0" border>新用户</el-checkbox>
                <el-checkbox :label="1" border>老用户</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
          <el-form-item label="订单状态：">
            <div class="item">
              <el-checkbox-group
                v-model="get_discount_coupon_info_list.status"
                :min="1"
                @change="getDiscountCouponInfoList"
              >
                <el-checkbox
                  v-for="(item, index) in status"
                  :key="index"
                  :label="item.value"
                  style="margin: 0.2rem 0.8rem 0.2rem 0;"
                  border
                >
                  {{ item.label }}({{ item.num }})
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
          <el-form-item label="归属区域：">
            <div class="item">
              <el-checkbox-group
                v-model="get_discount_coupon_info_list.area_id"
                :min="1"
                @change="getDiscountCouponInfoList"
              >
                <el-checkbox
                  v-for="(item, index) in data_discount_coupon_info_list.area"
                  :key="index"
                  :label="item.area_id"
                  style="margin: 0.2rem 0.8rem 0.2rem 0;"
                  border
                >
                  [{{ item.area_number }}]{{ item.name }}({{ item.num }})
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
        </el-form>
      </div>

      <div class="statistic-wrap">
        <div class="item">
          <el-card
            v-for="(item, index) in statistic"
            :key="index"
            :index="index"
            :body-style="{background: item.color}"
          >
            <span class="icon">
              <i :class="item.icon" />
            </span>
            <div class="content">
              <span v-if="item.actualValue !== null" class="count">{{ item.actualValue }}</span>
              <span v-else class="count">0.00</span>
              <span class="label">{{ item.name }}</span>
            </div>
          </el-card>
        </div>
      </div>
    </el-card>

    <el-card shadow="never">
      <div class="title">优惠券</div>

      <el-table
        v-loading="dataRequestLoading"
        element-loading-text="正在加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.5)"
        :data="data_discount_coupon_info_list.data"
        class="table"
        :height="tableHeight"
        :max-height="tableHeight"
        highlight-current-row
        stripe
        @sort-change="changeSort"
      >
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column prop="discount_coupon_number" label="优惠券编号" />
        <el-table-column prop="name" label="优惠券名称" />
        <el-table-column label="用户头像">
          <template slot-scope="{ row }">
            <el-image v-if="row.avatar_url !== null" :src="row.avatar_url" style="width:60px;height:60px" :preview-src-list="[row.avatar_url]" />
            <span v-else>暂无</span>
          </template>
        </el-table-column>
        <el-table-column label="微信昵称">
          <template slot-scope="{ row }">
            <span v-if="row.nick_name !== null">{{ row.nick_name }}</span>
            <span v-else>暂无</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="优惠券类型">
          <template slot-scope="{ row }">
            <span>{{ type[row.type] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="用户类型">
          <template slot-scope="{ row }">
            <span>{{ user_type[row.user_type] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="commencement_date" label="生效日期" sortable="custom" column-key="commencement_date" />
        <el-table-column prop="expiry_date" label="失效日期" sortable="custom" column-key="expiry_date" />
        <el-table-column prop="type" label="优惠券状态">
          <template slot-scope="{ row }">
            <el-tag :type="status_color(row.status)" effect="dark">{{ status_text(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="领取日期" sortable="custom" column-key="create_time" />
        <el-table-column fixed="right" label="操作" width="90">
          <template slot-scope="{ row }">
            <el-button type="primary" @click.stop="openDiscountCouponInfoDialog(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        background
        layout="total, sizes,prev, pager, next, jumper"
        :total="data_discount_coupon_info_list.total"
        :page-size="get_discount_coupon_info_list.pageSize"
        :page-sizes="[20, 50, 100]"
        :current-page="get_discount_coupon_info_list.currentPage"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
      />
      <!-- 分页 -->
    </el-card>

    <!-- 优惠券详情dialog -->
    <el-dialog
      :title="'优惠券编号 '+discount_coupon_info.discount_coupon_number"
      :visible.sync="discountCouponInfoDialog"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-divider content-position="left">优惠券信息</el-divider>
      <el-form :inline="true" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="优惠券名称">
              <span>{{ discount_coupon_info.name }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优惠券副标题">
              <span>{{ discount_coupon_info.subhead }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form :inline="true" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="优惠券类型">
              <span>{{ type[discount_coupon_info.type] }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优惠码">
              <span v-if="discount_coupon_info.is_promotion_code === 0">{{ is_not[discount_coupon_info.is_promotion_code] }}</span>
              <span v-else>{{ discount_coupon_info.promotion_code }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form :inline="true" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="优惠券方式">
              <span v-if="discount_coupon_info.type === 0">{{ '满'+discount_coupon_info.full_price+'减'+discount_coupon_info.subtract_price }}</span>
              <span v-else-if="discount_coupon_info.type === 1">{{ '满'+discount_coupon_info.full_price+'折'+discount_coupon_info.discount }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户类型">
              <span>{{ user_type[discount_coupon_info.user_type] }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form :inline="true" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="固定日期">
              <span>{{ is_not[discount_coupon_info.is_fixed_date] }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有效天数">
              <span>{{ '自领取日起 '+discount_coupon_info.expiry_day+' 天' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form :inline="true" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="生效日期">
              <span>{{ discount_coupon_info.commencement_date }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="失效日期">
              <span>{{ discount_coupon_info.expiry_date }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form :inline="true" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="优惠券状态">
              <el-tag :type="status_color(discount_coupon_info.status)" effect="dark">{{ status_text(discount_coupon_info.status) }}</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="领取日期">
              <span>{{ discount_coupon_info.create_time }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form label-width="110px">
        <el-form-item label="使用说明">
          <span>{{ discount_coupon_info.direction_for_use }}</span>
        </el-form-item>
      </el-form>
      <el-form :inline="true" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属区域编号">
              <span>{{ discount_coupon_info.area_number }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属区域">
              <span>{{ discount_coupon_info.area_name }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider content-position="left">用户信息</el-divider>
      <el-form :inline="true" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户头像">
              <el-image v-if="discount_coupon_info.avatar_url !== null" :src="discount_coupon_info.avatar_url" style="width:30px;height:30px" :preview-src-list="[discount_coupon_info.avatar_url]" />
              <span v-else>暂无</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户昵称">
              <span v-if="discount_coupon_info.nick_name !== null">{{ discount_coupon_info.nick_name }}</span>
              <span v-else>暂无</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider content-position="left">活动信息</el-divider>
      <el-form :inline="true" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="活动标题">
              <span>{{ discount_coupon_info.title }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动触发条件">
              <span>{{ condition_type[discount_coupon_info.condition_type] }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form :inline="true" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="活动开始时间">
              <span>{{ discount_coupon_info.start_date }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动结束时间">
              <span>{{ discount_coupon_info.end_date }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form :inline="true" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="活动状态">
              <el-tag :type="activity_status_color(discount_coupon_info.activity_status)" effect="dark">{{ activity_status_text(discount_coupon_info.activity_status) }}</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动发布日期">
              <span>{{ discount_coupon_info.create_time }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form label-width="110px">
        <el-form-item label="活动规则">
          <span v-html="discount_coupon_info.rule" />
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 优惠券详情dialog -->
  </div>
</template>

<script>
import { getDiscountCouponInfoList, getDiscountCouponActivityInfo } from '@/api/coupon-manage'

export default {
  data() {
    return {
      // table高度自适应
      tableHeight: window.innerHeight - 260,

      // loading开关
      dataRequestLoading: false,

      // 第一次请求
      once: false,

      // dialog 开关
      discountCouponInfoDialog: false,

      // 显示优惠券类型
      type: {
        0: '立减',
        1: '折扣'
      },

      // 显示优惠券状态
      status: [
        { color: 'warning', label: '待领取', value: 0, num: 0 },
        { color: 'primary', label: '待使用', value: 1, num: 0 },
        { color: 'success', label: '已使用', value: 2, num: 0 },
        { color: 'danger', label: '已过期', value: 3, num: 0 },
        { color: 'info', label: '已取消', value: 4, num: 0 }
      ],

      // 显示优惠券活动状态
      activity_status: [
        { color: 'warning', label: '未开始', value: 0 },
        { color: 'success', label: '进行中', value: 1 },
        { color: 'info', label: '已结束', value: 2 }
      ],

      // 显示用户类型
      user_type: {
        0: '新用户',
        1: '老用户'
      },

      // 显示活动触发条件
      condition_type: {
        0: '新用户注册',
        1: '云打印下单付款',
        2: '需求订单下单付款',
        3: '朋友首单下单付款',
        4: '用户领取'
      },

      // 显示是/否
      is_not: {
        0: '否',
        1: '是'
      },

      // 数据统计
      statistic: [
        { name: '优惠券总数', icon: 'el-icon-s-promotion', actualValue: '--', color: '#9964e380' },
        { name: '使用比率', icon: 'el-icon-s-management', actualValue: '--', color: '#ffc24780' },
        { name: '弃用比率', icon: 'el-icon-s-data', actualValue: '--', color: '#409eff80' },
        { name: '优惠码券总数', icon: 'el-icon-s-opportunity', actualValue: '--', color: '#3abf9480' },
        { name: '剩余优惠码券数', icon: 'el-icon-share', actualValue: '--', color: '#f55d5d80' }
      ],

      // 查询请求参数
      get_discount_coupon_info_list: {
        pageSize: 20,
        currentPage: 1,
        keywordNumber: '',
        keywordName: '',
        sort_name: '',
        sort: 'desc',
        discount_coupon_template_id: [1],
        discount_coupon_activity_id: [1],
        type: [0, 1],
        is_promotion_code: [0, 1],
        user_type: [0, 1],
        is_fixed_date: [0, 1],
        status: [0, 1, 2, 3, 4],
        area_id: [1]
      },

      // 查询返回值
      data_discount_coupon_info_list: {
        discountCouponTemplate: [],
        discountCouponActivity: [],
        area: [],
        statusNum: '',
        data: [],
        total: 0
      },

      // 优惠券详情信息
      discount_coupon_info: {
        area_name: '',
        area_number: '',
        avatar_url: '',
        commencement_date: '',
        create_time: '',
        direction_for_use: '',
        discount: '',
        discount_coupon_activity_id: '',
        discount_coupon_id: '',
        discount_coupon_number: '',
        discount_coupon_template_id: '',
        expiry_date: '',
        expiry_day: '',
        full_price: '',
        is_fixed_date: '',
        is_promotion_code: '',
        name: '',
        nick_name: '',
        promotion_code: '',
        status: 0,
        subhead: '',
        subtract_price: '',
        type: '',
        user_type: '',
        condition_type: '',
        title: '',
        path: '',
        rule: '',
        activity_status: 0,
        is_show: '',
        start_date: '',
        end_date: '',
        activity_create_time: ''
      }
    }
  },
  mounted() {
    this.getDiscountCouponInfoList() // 查询优惠券信息列表
  },
  methods: {
    // 查询优惠券信息列表
    getDiscountCouponInfoList() {
      this.dataRequestLoading = true
      getDiscountCouponInfoList(this.get_discount_coupon_info_list).then(res => {
        this.dataRequestLoading = false
        this.data_discount_coupon_info_list = {
          discountCouponTemplate: res.result.discountCouponTemplate,
          discountCouponActivity: res.result.discountCouponActivity,
          area: res.result.area,
          statusNum: res.result.statusNum,
          statisticsNum: res.result.statisticsNum,
          data: res.result.showing,
          total: res.result.total
        }
        this.status[0].num = this.data_discount_coupon_info_list.statusNum.status0_num
        this.status[1].num = this.data_discount_coupon_info_list.statusNum.status1_num
        this.status[2].num = this.data_discount_coupon_info_list.statusNum.status2_num
        this.status[3].num = this.data_discount_coupon_info_list.statusNum.status3_num
        this.status[4].num = this.data_discount_coupon_info_list.statusNum.status4_num

        this.statistic = [
          { name: '优惠券总数', icon: 'el-icon-s-promotion', actualValue: this.data_discount_coupon_info_list.statisticsNum.discount_coupon_total, color: '#9964e380' },
          { name: '使用比率', icon: 'el-icon-s-management', actualValue: this.data_discount_coupon_info_list.statisticsNum.using_percent, color: '#ffc24780' },
          { name: '弃用比率', icon: 'el-icon-s-data', actualValue: this.data_discount_coupon_info_list.statisticsNum.give_up_percent, color: '#409eff80' },
          { name: '优惠码券总数', icon: 'el-icon-s-opportunity', actualValue: this.data_discount_coupon_info_list.statisticsNum.promotion_code_total, color: '#3abf9480' },
          { name: '剩余优惠码券数', icon: 'el-icon-share', actualValue: this.data_discount_coupon_info_list.statisticsNum.no_user_promotion_code_total, color: '#f55d5d80' }
        ]

        if (this.once === false) {
          this.get_discount_coupon_info_list.area_id = []
          this.data_discount_coupon_info_list.area.forEach(val => {
            this.get_discount_coupon_info_list.area_id.push(val.area_id)
          })
          this.get_discount_coupon_info_list.discount_coupon_template_id = []
          this.data_discount_coupon_info_list.discountCouponTemplate.forEach(val => {
            this.get_discount_coupon_info_list.discount_coupon_template_id.push(val.discount_coupon_template_id)
          })
          this.get_discount_coupon_info_list.discount_coupon_activity_id = []
          this.data_discount_coupon_info_list.discountCouponActivity.forEach(val => {
            this.get_discount_coupon_info_list.discount_coupon_activity_id.push(val.discount_coupon_activity_id)
          })
          this.once = true
          this.getDiscountCouponInfoList()
        }
      })
    },

    // 显示优惠券状态
    status_text(data) {
      const status = this.status.filter(v => {
        if (v.value === data) {
          return v.label
        }
      })
      return status[0].label
    },

    // 显示优惠券状态颜色
    status_color(data) {
      const status = this.status.filter(v => {
        if (v.value === data) {
          return v.color
        }
      })
      return status[0].color
    },

    // 显示优惠券活动状态
    activity_status_text(data) {
      const status = this.activity_status.filter(v => {
        if (v.value === data) {
          return v.label
        }
      })
      return status[0].label
    },

    // 显示优惠券状态颜色
    activity_status_color(data) {
      const status = this.activity_status.filter(v => {
        if (v.value === data) {
          return v.color
        }
      })
      return status[0].color
    },

    // 打开优惠券详情界面
    openDiscountCouponInfoDialog(row) {
      this.discount_coupon_info = {
        area_name: row.area_name,
        area_number: row.area_number,
        avatar_url: row.avatar_url,
        commencement_date: row.commencement_date,
        create_time: row.create_time,
        direction_for_use: row.direction_for_use,
        discount: row.discount,
        discount_coupon_activity_id: row.discount_coupon_activity_id,
        discount_coupon_id: row.discount_coupon_id,
        discount_coupon_number: row.discount_coupon_number,
        discount_coupon_template_id: row.discount_coupon_template_id,
        expiry_date: row.expiry_date,
        expiry_day: row.expiry_day,
        full_price: row.full_price,
        is_fixed_date: row.is_fixed_date,
        is_promotion_code: row.is_promotion_code,
        name: row.name,
        nick_name: row.nick_name,
        promotion_code: row.promotion_code,
        status: row.status,
        subhead: row.subhead,
        subtract_price: row.subtract_price,
        type: row.type,
        user_type: row.user_type,
        condition_type: '--',
        title: '--',
        path: '--',
        rule: '--',
        activity_status: 0,
        is_show: '--',
        start_date: '--',
        end_date: '--',
        activity_create_time: '--'
      }
      getDiscountCouponActivityInfo({ discount_coupon_activity_id: row.discount_coupon_activity_id }).then(res => {
        this.discount_coupon_info.condition_type = res.result.condition_type
        this.discount_coupon_info.title = res.result.title
        this.discount_coupon_info.path = res.result.path
        this.discount_coupon_info.rule = res.result.rule
        this.discount_coupon_info.activity_status = res.result.status
        this.discount_coupon_info.is_show = res.result.is_show
        this.discount_coupon_info.start_date = res.result.start_date
        this.discount_coupon_info.end_date = res.result.end_date
        this.discount_coupon_info.activity_create_time = res.result.create_time
      })
      this.discountCouponInfoDialog = true
    },

    // 切换每页条数方法
    changePageSize(data) {
      this.get_discount_coupon_info_list.pageSize = data
      this.getDiscountCouponInfoList()
    },

    // 切换页码方法
    changeCurrentPage(data) {
      this.get_discount_coupon_info_list.currentPage = data
      this.getDiscountCouponInfoList()
    },

    // 排序
    changeSort({ column, order }) {
      if (column.columnKey === 'create_time') {
        switch (order) {
          case 'descending':
            this.get_discount_coupon_info_list.sort_name = 'create_time'
            this.get_discount_coupon_info_list.sort = 'desc'
            this.getDiscountCouponInfoList()
            break
          case 'ascending':
            this.get_discount_coupon_info_list.sort_name = 'create_time'
            this.get_discount_coupon_info_list.sort = 'asc'
            this.getDiscountCouponInfoList()
            break
          default:
            this.get_discount_coupon_info_list.sort_name = ''
            this.get_discount_coupon_info_list.sort = 'desc'
            this.getDiscountCouponInfoList()
        }
      } else if (column.columnKey === 'commencement_date') {
        switch (order) {
          case 'descending':
            this.get_discount_coupon_info_list.sort_name = 'commencement_date'
            this.get_discount_coupon_info_list.sort = 'desc'
            this.getDiscountCouponInfoList()
            break
          case 'ascending':
            this.get_discount_coupon_info_list.sort_name = 'commencement_date'
            this.get_discount_coupon_info_list.sort = 'asc'
            this.getDiscountCouponInfoList()
            break
          default:
            this.get_discount_coupon_info_list.sort_name = ''
            this.get_discount_coupon_info_list.sort = 'desc'
            this.getDiscountCouponInfoList()
        }
      } else if (column.columnKey === 'expiry_date') {
        switch (order) {
          case 'descending':
            this.get_discount_coupon_info_list.sort_name = 'expiry_date'
            this.get_discount_coupon_info_list.sort = 'desc'
            this.getDiscountCouponInfoList()
            break
          case 'ascending':
            this.get_discount_coupon_info_list.sort_name = 'expiry_date'
            this.get_discount_coupon_info_list.sort = 'asc'
            this.getDiscountCouponInfoList()
            break
          default:
            this.get_discount_coupon_info_list.sort_name = ''
            this.get_discount_coupon_info_list.sort = 'desc'
            this.getDiscountCouponInfoList()
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .statistic-wrap {
    width: 50%;
    color: #606266;
    display: inline-block;
    padding: 10px;
    float: left;

    .item {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 10px;

      .el-card {
        width: 200px;
        margin-right: 10px;
        box-shadow: 0 0 10px #f5f9fc;

        .icon {
          width: 40%;
          color: #ffffff;
          font-size: 45px;
        }

        .content {
          width: 60%;
          display: inline-block;
          color: white;
          .label {
            display: block;
            font-size: 12px;
            font-weight: 600;
          }
          .count {
            font-size: 24px;
            font-weight: 600;
          }

          .el-progress {
            width: 60%;
            float: left;

            .action {
              width: 20%;
              margin-left: 10px;
              float: left;

              .el-progress-bar {
                width: 90%
              }

            }

          }

        }

      }
    }
    .text-gray {
      color: #a1a1a1
    }

  }
</style>
